<template>
  <!-- 1.创建图表放置区域 -->
  <div id="b1_chart" style="height: 100%;"></div>
  <!-- <div id="container"></div> -->
</template>


// <script setup>
// onMounted是vue3的生命周期函数之一，意思是在组件挂载之后再调用。
import {onMounted} from "vue";
// 1.导入折线图 使用import导入对应的图表
import { Line } from "@antv/g2plot";

// 2.创建图表对象
// 创建一个绘制图表的函数，然后在我们div加载之后去调用函数， --window.onload = function()--生命周期


//3.3图表的数据

const data=[
    {
      "date": "3:54:04",
      "type": "value1",
      "value": 26
    },
    {
      "date": "3:54:04",
      "type": "value1",
      "value": 15
    },
    {
      "date": "3:53:04",
      "type": "value1",
      "value": 18
    },
    {
      "date": "3:53:04",
      "type": "value1",
      "value": 23
    },
  
    {
      "date": "3:52:04",
      "type": "value1",
      "value": 24
    },
    {
      "date": "3:52:04",
      "type": "value1",
      "value": 17
    },
  
    {
      "date": "3:51:04",
      "type": "value1",
      "value": 17
    },
    {
      "date": "3:51:04",
      "type": "value1",
      "value": 22
    },

  
    {
      "date": "3:50:04",
      "type": "value1",
      "value": 24
    },
    {
      "date": "3:50:04",
      "type": "value1",
      "value": 22
    },

    {
      "date": "3:49:04",
      "type": "value1",
      "value": 16
    },
    {
      "date": "3:49:04",
      "type": "value1",
      "value": 23
    },
  
    {
      "date": "3:48:04",
      "type": "value1",
      "value": 23
    },
    {
      "date": "3:48:04",
      "type": "value1",
      "value": 24
    },

    {
      "date": "3:47:04",
      "type": "value1",
      "value": 26
    },
    {
      "date": "3:47:04",
      "type": "value1",
      "value": 21
    },
    {
      "date": "3:46:04",
      "type": "value1",
      "value": 19
    },
    {
      "date": "3:46:04",
      "type": "value1",
      "value": 26
    },
    {
      "date": "3:45:04",
      "type": "value1",
      "value": 21
    },
    {
      "date": "3:45:04",
      "type": "value1",
      "value": 18
    },
  
  ]




let options={
      data,
      xField: 'date',
      yField: 'value',
      xAxis:{
        label:{
          rotate:-45,
        },
      },
      yAxis: {
        label: {

  formatter: (v) => {
    const rangeStart = 0;
    const rangeEnd = 30;
    const interval = 10;
    if (v >= rangeStart && v <= rangeEnd) {
      const value = (v / interval).toFixed(0) * interval;
      return value;
    }
    return v;
  },
},
},
        seriesField: 'type',
      };
      // seriesField: 'type',
    // );
    // b2line.render()
    
// 
  


// 3.1初始化图表的方法
const init1Chart =()=>{
  let b1Line  = new Line(document.getElementById('b1_chart'),options)

  b1Line.render()
}
// 4 在onMounter()方法中调用初始化图表的方法

onMounted(()=>{
  init1Chart();
})

</script>


<style lang='scss' scoped>
/* 样式代码 */

</style>